﻿<html>
	<head>
	    <title>ide</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<link rel="stylesheet" href="lib/codemirror.css">
		<link rel="stylesheet" href="addon/dialog/dialog.css">
		<link rel="stylesheet" href="theme/the-matrix.css">
		<link rel="stylesheet" href="addon/display/fullscreen.css">	
		<link rel="stylesheet" href="addon/fold/foldgutter.css" />	
	    <link rel="stylesheet" href="addon/hint/show-hint.css">		
		
		<script src="require.js"></script>
		<script>
			require([
			  "lib/codemirror", "mode/htmlmixed/htmlmixed","addon/display/fullscreen.js", "addon/fold/foldcode.js", "addon/fold/foldgutter.js",
			  "addon/fold/xml-fold.js","addon/fold/brace-fold.js","mode/xml/xml.js", "formatHtml/beautifyHtml.js",
			  "formatHtml/htmlformat.js","formatHtml/jsformat.js","addon/hint/show-hint.js", "addon/hint/css-hint.js", "addon/hint/javascript-hint.js",
			  "addon/hint/xml-hint.js","addon/hint/html-hint.js"
			], function(CodeMirror) {
			  var doc = CodeMirror.fromTextArea(document.getElementById("code"), {			    
				lineNumbers: true,
				mode: "htmlmixed",
			    theme: "the-matrix",
				autoMatchParens:true,
				foldGutter: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
			    extraKeys: {
					"F11": function(cm) {
					  cm.setOption("fullScreen", !cm.getOption("fullScreen"));
					},
					"Esc": function(cm) {
					  if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
					},
					"Alt-/": "autocomplete"
				}
			  });
			  doc.setSize('100%', 300);
			  doc.foldCode(CodeMirror.Pos(0, 0));
			  doc.foldCode(CodeMirror.Pos(21, 0));
			  
			  //插入标签数据
			  $("#insertValueListener").click(function(){
					var tag = $("#codeContainer").val();
					if (tag.indexOf("<!--") > 0) {
						var selection = doc.getSelection();	
						var tagStart = tag.substring(0, tag.indexOf("<!--"));
						var tagEnd = tag.substring(tag.indexOf("-->") + 3, tag.length);
						tag = tagStart + selection + tagEnd;
					}
                   	  
					doc.replaceSelection(tag);
			  })
			  
			  //格式化内容
			  $("#formatListener").click(function(){			       
					var html = do_js_beautify("formatListener", doc.getValue());							
					doc.setValue(html);
			  })
			  
			});			
			
		</script>
		
	</head>
	<body>
		<div>
			<textarea id="codeContainer"></textarea>
			<input id="insertValueListener" type="button" value="插入代码" />
			<input id="formatListener" type="button" value="格式化代码" />
			<span style="color:#0D59A6">F11</span>:全屏，<span style="color:#0D59A6">ESC</span>：退出，<span style="color:#0D59A6">Alt+/</span>:代码提示
		</div>
		<textarea id="code"></textarea>
		
	</body>
</html>